@each $key, $color in $colors-bg {
  .bg-#{''+$key+''} {
    //深色主题，字体白色，其他主题色
    background-color: $color;
  }
  .bg-#{''+$key+''}-gradual {
    background-image: linear-gradient(180deg, mix($color-white, $color, 85%), mix($color-white, $color, 90%) 50%, $color-bg-default);
  }
  .bg-#{''+$key+''}_light {
    //深色主题，字体白色，其他主题色
    background-color: mix($color-white, $color, 90%);
  }
  .bg-#{''+$key+''}_dark {
    //深色主题，字体白色，其他主题色
    background-color: mix($color-black, $color, 10%);
  }

  .hover-#{''+$key+''}:hover {
    background-color: $color;
  }
  .hover-#{''+$key+''}_light:hover {
    //深色主题，字体白色，其他主题色
    background-color: mix($color-white, $color, 90%);
  }
  .hover-#{''+$key+''}_dark:hover {
    //深色主题，字体白色，其他主题色
    background-color: mix($color-black, $color, 10%);
  }
}

.bg-blueDeep_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #5b8ff9, 80%);
}
.bg-greenLight_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #38d193, 80%);
}
.bg-greyDeep_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #626c91, 80%);
}
.bg-yellow_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #f6bd15, 80%);
}
.bg-red_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #e86552, 80%);
}
.bg-blueLight_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #30b1e0, 80%);
}
.bg-purpleDeep_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #6a23cc, 80%);
}
.bg-orange_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #ff9844, 80%);
}
.bg-greenDeep_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #1d9493, 80%);
}
.bg-purple_echart {
  //深色主题，字体白色，其他主题色
  background-color: mix($color-white, #ba40d9, 80%);
}
